<template>
    <el-dialog :visible.sync="showAddModal" :append-to-body="true"
               :close-on-click-modal="false" width="30%"
               :close-on-press-escape="false" :show-close="false" class="ele-modal"
               :modal-append-to-body='false'>
        <h4 slot="title">洽谈</h4>
        <div class="product-detail-modal">
            <div>
                <h3 class="panel-title">基本信息 </h3>
            </div>
            <el-row>
                <ul class="bill-tips clearfix">
                    <li style="width: 100%;margin-left: 15px">
                        <em>姓名</em>
                        <span v-if="!$isNullObj(data.user)">{{data.user.realName}}</span>
                    </li>
                </ul>
                <ul class="bill-tips clearfix">
                    <li style="width: 100%;margin-left: 15px">
                        <em>公司名称</em>
                        <span>{{data.companyName}}</span>
                    </li>
                </ul>
                <ul class="bill-tips clearfix">
                    <li style="width: 100%;margin-left: 15px">
                        <em>时间</em>
                        <span>{{data.createTime}}</span>
                    </li>
                </ul>
                <ul class="bill-tips clearfix">
                    <li style="width: 100%;margin-left: 15px">
                        <em>客户洽谈内容</em>
                        <span>{{data.remark}}</span>
                    </li>
                </ul>
            </el-row>
            <div>
                <h3 class="panel-title">洽谈结果</h3>
            </div>
            <el-form :model="newForm" :modal-append-to-body='false' :rules="rules"
                     ref="ruleForm">
                <el-row>
                    <el-col :span="16" :offset="1">
                        <el-form-item label="" prop="remark">
                            <el-input
                                type="textarea"
                                :rows="2"
                                resize="none"
                                placeholder=""
                                v-model="newForm.remark">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div slot="footer" class="row" style="text-align: center;margin-right: 5px;">
            <a class="revision-btn" href="javaScript:void(0)" @click="onSubmit">保 存</a>
            <a class="revision-btn-default" style="margin-left: 5px;"
               href="javaScript:void(0)" @click="onCancel">取 消</a>
        </div>
    </el-dialog>
</template>

<script>

    export default {
        name: "editRemarkModal",
        props: {
            showAddModal: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                id: '',
                data: {},
                newForm: {
                    remark: ''
                },
                rules: {
                    remark: [
                        {required: true, message: '请输入洽谈结果', trigger: 'blur'}
                    ],
                },
            }
        },
        mounted: function () {
        },
        methods: {
            onSubmit() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.$emit('editRemark', this.id, this.newForm.remark);
                        this.newForm.remark = '';
                    } else {
                        return false;
                    }
                });

            },
            onCancel() {
                this.newForm.remark = '';
                this.$refs.ruleForm.resetFields();
                this.$emit('cancelEditRmkModal');
            },
            async getInfo(id) {
                this.id = id;
                let res = await this.$api.get('/mall/cooperate/info/' + id, {});
                if (res.code === 0) {
                    this.data = res.cooperate;
                } else {
                    this.$message.error(res.msg);
                }
            },
        }
    }
</script>

<style scoped>
    .product-detail-modal {
        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 12px;
        color: #676a6c;
    }

    .ele-modal /deep/ .el-dialog__header {
        border-bottom: 1px solid #e5e5e5;
        padding: 5px 0 2px 15px !important;
    }

    .ele-modal /deep/ .el-dialog__body {
        padding: 0 20px 30px 20px;
    }

    .ele-modal /deep/ .el-dialog__footer {
        border-top: 1px solid #e5e5e5;
        padding: 15px;
    }

    .ele-modal /deep/ .el-dialog__body {
        padding: 0 20px;
    }


</style>
